<template>
	<view class="page-container">

		<z-paging ref="pagingRef" v-model="dataList" @query="queryList" :fixed="false" :empty-config="{tip: '暂无数据'}"
			class="paging-container">
			<view class="content">
				<view class="item-list">
					<view class="item" v-for="(item, index) in dataList" :key="index" @click="itemClick(item)">
						<view class="shop-top">
							<image class="shop-photo" :src="item.imageUrl" mode="widthFix" />
							<view class="distance-tag">
								<text class="distance-text">{{ item.distance }}km</text>
							</view>
						</view>
						<view class="shop-name">
							<text class="name-text">{{ item.name }}</text>
						</view>
					</view>
				</view>
			</view>

			<template #empty>
				<view>暂无数据</view>
			</template>
		</z-paging>
	</view>
</template>

<script setup>
	import {
		ref,
		watch
	} from "vue";
	import {
		onShow
	} from '@dcloudio/uni-app';
	import {
		browseReceiveList
	} from '@/api/browsinghistory.js';
	import {
		getLatitude,
		getLongitude
	} from "@/common/util.js";
	import CustomNavBar from "@/components/custom-navbar/index.vue";

	const props = defineProps({
		currentId: Number
	});

	const pagingRef = ref(null);
	const dataList = ref([]);

	watch(() => props.currentId, (newVal) => {
		if (newVal === 4) {
			pagingRef.value?.reload();
		}
	});

	onShow(() => {
		if (pagingRef.value && props.currentId === 4) {
			pagingRef.value.reload();
		}
	});

	const queryList = async (pageNum, pageSize) => {
		try {
			const params = {
				browseType: 4, // 确保这个类型与后端一致
				longitude: getLongitude(),
				latitude: getLatitude(),
				pageNum,
				pageSize
			};

			const res = await browseReceiveList(params);
			console.log('接口返回数据:', res); // 调试用

			if (res?.code === 200) {
				// 处理接口返回数据，确保格式正确
				const list = res.rows || res.data?.rows || [];
				const formattedList = list.map(item => ({
					...item,
					// 确保数据结构包含模板需要的字段
					imageUrl: item.merchant.merImagesList[0],
					distance: item.merchant.distance || 0,
					name: item.merchant.merName || '未知店铺'
				}));

				// 分页完成处理
				const total = res.total || res.data?.total || 0;
				const hasMore = pageNum * pageSize < total;
				pagingRef.value.complete(formattedList, !hasMore);
			} else {
				console.error('接口返回错误:', res);
				pagingRef.value.complete([], true);
			}
		} catch (error) {
			console.error('请求出错:', error);
			pagingRef.value.complete(false);
		}
	};


	const itemClick = (item) => {
		console.log('item',item);
		uni.navigateTo({
			url: `/pages/nearby/nearDetails?item=${encodeURIComponent(JSON.stringify(item))}`
		});
	};
</script>

<style lang="scss" scoped>
	.page-container {
		width: 100%;
		height: 100%;
		// background-color: #f5f5f5;
	}

	.paging-container {
		width: 100%;
		height: 100%;
	}

	.content {
		padding: 20rpx;
	}

	.empty-view {
		text-align: center;
		padding: 40rpx;
		color: #999;
		font-size: 28rpx;
		width: 100%;
	}

	.item-list {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		// padding: 10rpx;
		box-sizing: border-box;

		.item {
			width: calc(50% - 10rpx);
			background-color: #ffffff;
			border-radius: 20rpx;
			box-sizing: border-box;
			margin-bottom: 20rpx;
			overflow: hidden;

			.shop-top {
				position: relative;
				width: 100%;

				.shop-photo {
					width: 100%;
					display: block;
					border-top-right-radius: 20rpx;
					border-top-left-radius: 20rpx;
				}

				.distance-tag {
					position: absolute;
					top: 10rpx;
					right: 10rpx;
					background: rgba(0, 0, 0, 0.5);
					color: #fff;
					font-size: 24rpx;
					padding: 5rpx 15rpx;
					border-radius: 24rpx;
					z-index: 10;
					font-weight: 400;
				}
			}

			.shop-name {
				padding: 35rpx 20rpx;

				.name-text {
					font-size: 30rpx;
					color: #333;
					font-weight: 500;
					width: 100%;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}
		}
	}
</style>